<template>
<u-tabbar
     :activeColor="activeColor"
	 inactiveColor="#7d7e80"
	:value="value"
	@change="toNewPage"
	:fixed="true"
	:placeholder="true"
	:safeAreaInsetBottom="true"
>
	<u-tabbar-item text="首页">
			<image
				slot="active-icon"
				src="https://pic.moresu.com/FlYIYelQsAhDr29CE1Oph6baVltA"
				style="width: 30px; height: 22px;object-fit: contain"
			></image>
			<image
			    style="width: 30px; height: 22px;object-fit: contain"
				slot="inactive-icon"
				src="https://pic.moresu.com/Fqawz7ujWNJYVKPY-X5JYmG5Wb-W"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="分类">
			<image
				slot="active-icon"
				src="https://pic.moresu.com/FssE0NYjVuPh_mWdTYQFIMBSSmLz"
				style="width: 30px; height: 22px;object-fit: contain"
			></image>
			<image
			    style="width: 30px; height: 22px;object-fit: contain"
				slot="inactive-icon"
				src="https://pic.moresu.com/Ftlr7AKqj1jZkoxu-GIDCxG8tQuZ"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="商品">
			<image
				slot="active-icon"
				src="https://pic.moresu.com/FmrXgdAgz13Dk0BH79IydFacEoG4"
				style="width: 30px; height: 22px;object-fit: contain"
			></image>
			<image
			    style="width: 30px; height: 22px;object-fit: contain"
				slot="inactive-icon"
				src="https://pic.moresu.com/FvVypB2UoxXu9XM9_3ErFM04Dlt8"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="购物车" :badge="carInfo">
			<image
				slot="active-icon"
				src="https://pic.moresu.com/FugjfRzZT4czKJmHtQD0hbFzmQKG"
				style="width: 30px; height: 22px;object-fit: contain"
			></image>
			<image
			    style="width: 30px; height: 22px;object-fit: contain"
				slot="inactive-icon"
				src="https://pic.moresu.com/Fuoid9gfq_iGFZVfdIFR2oxg3lpT"
			></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image
				slot="active-icon"
				src="https://pic.moresu.com/Fsvr0Zfg0Eb_c9TGiSNZJDcnVq3r"
				style="width: 30px; height: 22px;object-fit: contain"
			></image>
			<image
			    style="width: 30px; height: 22px;object-fit: contain"
				slot="inactive-icon"
				src="https://pic.moresu.com/FovGULPo3-Xu301RF10chCvS8Soo"
			></image>
			
		</u-tabbar-item>
</u-tabbar>
</template>

<script>
import { mapState } from 'vuex';
import store from '@/store';
import{inquiryCartInfo} from '@/config/points.js'
export default {
    name: 'b-navbar',
	
    props:{
        
    },
    data(){
        return {
			value:0,
		    activeColor:'#FF8E12',
			list:[
				{value:0,color:'#FF8E12',path:'/pagesIntegral/integral'},
				{value:1,color:'#6C6CEA',path:'/pagesIntegral/intergralClassList'},
				{value:2,color:'#F23D4F',path:'/pagesIntegral/intergralGoodsList'},
				{value:3,color:'#FC7032',path:'/pagesIntegral/integralCar'},
				{value:4,color:'#BD50D3',path:'/pages/my/index'},
			]
        }
    },
    created() {
        
    },
	computed: {
			...mapState(['carInfo']),
			},
    methods:{
		init(value,activeColor){
			this.value = value
			this.activeColor = activeColor
			store.dispatch('getInquiryCartInfo')
		},
		
		toNewPage(index){
			console.log(index)
			this.value = this.list[index]['value']
			this.activeColor = this.list[index]['color']
			if(index < 4){
				uni.navigateTo({
					url: this.list[index]['path']
				})
			}else{
				uni.switchTab({
					url: this.list[index]['path']
				})
			}
			
		},
        
		
       
	   
    }
}
</script>

<style scoped lang="scss">



</style>
